<template>
  <div class="fenyi">
    <div class="shuosuo">
      <el-input
        placeholder="编号"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>
      <el-input
        placeholder="手机号码"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>
      <el-input
        placeholder="发布人昵称"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>

      <el-select v-model="value" placeholder="分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <el-input
        placeholder="标题"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>
      <el-input
        placeholder="关键词"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>
      <el-input
        placeholder="标签"
        style="width: 221px"
        v-model="input"
        clearable
      >
      </el-input>

      <el-select v-model="value" placeholder="是否推荐">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>

      <el-select v-model="formInline.status" clearable placeholder="状态">
        <el-option label="待审核" value="0"> </el-option>
        <el-option label="审核不通过" value="1"> </el-option>
        <el-option label="审核通过" value="2"> </el-option>
      </el-select>

      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker v-model="value2" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker v-model="value3" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>

      <div class="block">
        <span class="demonstration"></span>
        <el-date-picker v-model="value4" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>

      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="dialogFormVisible = true"
        >搜索</el-button
      >
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="dialogFormVisible = true"
        >上传</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="id" label="ID" width="120"> </el-table-column>

        <el-table-column prop="name" label="发布人" width="120">
          <span>-</span><br />
          <span>-</span>
        </el-table-column>
        <el-table-column
          prop="this.name"
          label="分类"
          width="120"
          v-model="formInline.status"
        >
        </el-table-column>
        <el-table-column prop="title" label="标题" width="350">
        </el-table-column>
        <el-table-column prop="statusStr" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="views" label="浏览量" width="60">
        </el-table-column>
        <!-- 发布/更新时间 -->
        <el-table-column prop="dateAdd" label="发布/更新时间" width="180">
        </el-table-column>
        <el-table-column prop="action" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edla(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="edlb(scope.row.id)"
              >删除</el-button
            >
            <router-view></router-view>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        :current-page="formInline.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
        @current-change="changep"
        @size-change="changeb"
      >
      </el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog title="添加文章" :visible.sync="dialogFormVisible">
      <el-form :model="fromadd" ref="yi">
        <el-form-item
          prop="title"
          label="标题"
          label-width="100px"
          :rules="{
            required: true,
            message: '标题不能为空',
            trigger: 'blur',
          }"
        >
          <el-input v-model="fromadd.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="分类"
          label-width="100px"
          prop="categoryId"
          :rules="{
            required: true,                   
            message: '分类不能为空',
            trigger: 'blur',
          }"
        >
          <el-select v-model="fromadd.categoryId" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sbb">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cmswenzhangyi, cmswenzhangshanchu } from "@/api";

export default {
  data() {
    return {
      form: {},
      value: "",
      scope: "",
      input: "",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      total: 0,
      formInline: { page: 1, pageSize: 10 },
      // 添加文章的表单
      fromadd: {},
      // 控制添加表单的显示和隐藏
      dialogFormVisible: false,
      currentPage4: 4,
      // selection:'',
      multipleSelection: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
          disabled: true,
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  methods: {
    // 表格
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 搜索案件
    suosuo() {
      this.formInline.page = 1;
      this.cmswenzhangyi();
    },
    // 文章列表
    cmswenzhangyi() {
      let params = this.formInline;
      cmswenzhangyi(params).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.tableData = res.data.result;
          this.total = res.data.totalRow;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    // 编辑操作
    edla(id) {
      console.log(id);
    },
    // 删除操作
    edlb(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        cmswenzhangshanchu({ id }).then((res) => {
          console.log(res);
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.cmswenzhangyi();
          }
        });
      });
    },
    // 翻页
    changep(val) {
      // console.log(this.formInline);
      this.formInline.page = val;
      this.cmswenzhangyi();
    },
    // pageSize 改变时会触发
    changeb(val) {
      this.formInline.pageSize = val;
      this.formInline.page = 1;
      this.cmswenzhangyi();
    },
    // 添加文章
    sbb() {
      console.log(this.$refs["yi"]);
      this.$refs["yi"].validate((valid) => {
        if (valid) {
          cmswenzhangyi(this.formadd).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              this.getArticleList();
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
  },
  mounted() {
    this.cmswenzhangyi();
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #fff;
}
.fenyi {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: hidden;

}
.shuosuo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* position: absolute; */
  /* top: -63px; */
  /* left: 0; */
  /* z-index: 55; */
  /* display: flex; */
}
.biaoge {
  display: flex;
}
</style>
<style scoped>
.element {
  margin-left: 0;
}
</style>
